<template>
  <div>
    <template v-for="(item) in itemList">
      <div class="spi-info" @click="spItemClick(item)" v-bind:key="item.id">
        <image :src="item.picUrl" class="spi-pic" resize="contain" ></image>
        <div class="spi-details">
          <div class="spi-title">
            <image :src="getPlatformIcon(item)" class="spi-title-icon"></image>
            <text class="spi-title-text">     {{item.title}}</text>
          </div>
          <div v-if="item.remainSeconds > 0" class="time-countdown-wrapper">
            <time-countdown :seconds.sync="item.remainSeconds"></time-countdown>
          </div>
          <progress-bar :text="'剩余' + (item.remainNum + '/' +item.totalNum)"
                        :value="(item.totalNum - item.remainNum) / item.totalNum"></progress-bar>
          <div class="spi-row">
            <div class="spi-price-wrapper">
              <text class="spi-price-title">咪乐族人: </text>
              <text class="spi-price">¥ {{item.price.toFixed(2)}}</text>
              <text class="spi-price-origin">    {{item.ecomPlatTitle}}价: ¥ {{item.originPrice.toFixed(2)}}</text>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
let urlPath = require('../include/url-path')
require('../include/page-xdom')
let modal = weex.requireModule('modal')
module.exports = {
  components: {
    'progress-bar': require('../components/progressbar.vue'),
    'time-countdown': require('../components/time-countdown.vue')
  },
  props: {
    itemList: {default: []},
    column: {default: 2},
    showDelBtn: {default: false},
    showSelBtn: {default: false}
  },

  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    onImageLoad (e) {
      modal.alert({message: JSON.stringify(e)})
    },
    spItemClick (item) {
      this.$emit('spItemClick', item)
    },
    delClick (item) {
      this.$emit('spItemDel', item)
    },
    selClick (item) {
      item._selected = !item._selected
      this.$emit('spItemSel', item, item._selected)
    },
    getPlatformIcon (item) {
      return urlPath.assets('images/icon/platform/' + item.ecomPlat + '.png')
    }
  }
}
</script>
<style lang="scss">

  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  @import "../sass/buttons";

  .time-countdown-wrapper {
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .spi {
    &-info {
      flex-direction: row;
      background-color: #ffffff;
      margin: 10px;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 0;
    }
    &-title {
      position: relative;
      &-text {
        font-size: 28px;
        color: $color;
        line-height: 32px;
        lines: 3;
        text-overflow: ellipsis;
      }

      &-icon {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
      }
      margin-bottom: 20px;
    }
    &-slogan {
      font-size: 32px;
      color: $color-warning;
      margin-bottom: 20px;
    }
    &-pic {
      width: 250px;
      height: 250px;
    }
    &-details {
      margin-left: 20px;
      flex: 1;
      height: 250px;
      justify-content: space-between;
    }
    &-commission {
      color: $color-primary;
      font-size: 26px;
      margin-bottom: 20px;
    }
    &-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    &-price {
      font-size: 36px;
      color: $color-primary;
      &-title {
        color: $color-muted;
        font-size: 26px;
      }
      &-origin {
        color: $color-muted;
        font-size: 26px;
      }
      &-wrapper {
        flex-direction: row;
        align-items: center;
        height: 38px;
      }
    }
  }

  .sp-item-row {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .item-title {
    padding: 10px;
    padding-bottom: 10px;
    &-text {
      font-size: 28px;
      color: $color;
      line-height: 3px;
      lines: 2;
      text-overflow: ellipsis;
    }

    &-icon {
      width: 32px;
      height: 32px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }

  .sp-item {
    background-color: #fff;
    position: relative;
  }

  .topbar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    left: 0;
    align-items: center;
    justify-content: flex-end;
    justify-items: flex-end;
    flex-direction: row;
    &-btn {
      margin-left: 10px
    }
  }

  .detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 10px;
    align-items: flex-end;
  }

  .sales-row {
    margin-bottom: 0;
  }

  .origin-price {
    color: $color-muted;
    font-size: 24px;
    /*text-decoration: line-through;*/
    font-weight: 100;
  }

  .sales {
    font-size: 24px;
    color: $color-muted;
  }

  .price {
    flex-direction: row;
    align-items: flex-end;
    &-y {
      font-size: 24px;
      color: $color-primary;
      font-weight: 100;
    }
    &-val {
      color: $color-primary;
      font-size: 32px;
    }
  }

  .remain-num {
    flex-direction: row;
    align-items: flex-end;
    &-title {
      color: $color-muted;
      font-size: 22px;
    }
    &-value {
      color: $color-warning;
      font-size: 24px;
    }
  }
</style>
